<template>
	<view>
		<view v-if="this.userInfo.sign_status == 1 || this.sign_status==2||this.userInfo.area == 2">
			
			<view class="ptb12 plr15" style="background-color: #F8E6E7;"
				v-if="userInfo.area == 1&&userInfo.user_bank&&userInfo.user_bank.reject_comment&&userInfo.user_bank.channel == 23">
				<image src="/static/images/wallet/gantanhao.png" mode="" style="width: 27upx;height: 27upx;"></image>
				<text class="ft12 gray6 ml5" style="color: #F44A42;">{{$t('mine').签约失败}}：{{userInfo.user_bank.reject_comment}}</text>
			</view>
			<view class="ptb12 plr15" style="background-color: #F8E6E7;"
				v-else-if="(this.userInfo.sign_status == 1)||this.userInfo.area == 2">
				<image src="../../static/images/wallet/source.png" mode="" style="width: 27upx;height: 21upx;"></image>
				<text class="ft12 gray6 ml5" style="color: #F44A42;">{{$t('mine').首次提现需要电签完成实名认证}}</text>
			</view>
			<view class="ptb12 plr15" style="background-color: #F8E6E7;" v-if="this.sign_status==2">
				<image src="../../static/images/wallet/source.png" mode="" style="width: 27upx;height: 21upx;"></image>
				<text class="ft12 gray6 ml5" style="color: #F44A42;">{{$t('mine').注册个体户需要电签完成实名认证}}</text>
			</view>
		</view>
		<view class="ptb12 plr15" v-else>
			<image src="../../static/images/wallet/sourcegray.png" mode="" style="width: 27upx;height: 21upx;"></image>
			<text class="ft12 gray6 ml5">{{$t('mine').当前绑定}} {{true_namey}} {{bank_numy}}</text>
		</view>
		<!-- 大陆 -->
		<view v-if="country==0">
			<view class="bgWhite plr15 ft15">
				<view class="" v-if="this.userInfo.sign_status==1">
					<view class="txt1">
						<text class="mr5">{{$t('mine').上传身份证照片}}</text>
						<image src="../../static/images/wallet/gantanhao.png" mode="" class="icon1"
							@click="is_show3=true">
						</image>
					</view>
					<view class="box1 mt5">
						<view class="bg1">
							<image :src="front_img||'../../static/images/wallet/renxiangmian.png'" mode="" class="img1"
								@click="chooseImage(1,1)"></image>
							<view class="bg2" v-show="front_img" @click="delPic(1)">
								<image src="../../static/images/wallet/delete1.png" mode="" class="img2"></image>
							</view>
						</view>
						<view class="bg1">
							<image :src="back_img||'../../static/images/wallet/guohuimian.png'" mode="" class="img1"
								@click="chooseImage(2,1)"></image>
							<view class="bg2" v-show="back_img" @click="delPic(2)">
								<image src="../../static/images/wallet/delete1.png" mode="" class="img2"></image>
							</view>
						</view>
					</view>
					<view class="box1 text-center">
						<view class="txt2">{{$t('mine').身份证人像面}}</view>
						<view class="txt2">{{$t('mine').身份证国徽面}}</view>
					</view>
				</view>
				<view class="align-center bdbe">
					<view class="txt">{{$t('mine').真实姓名}}</view>
					<input @blur="saveInfo()" v-model="username" type="text" class="flex1 h50" @input="nameInput"
						:placeholder="$t('mine').输入您的真实姓名" placeholder-class="placeholderStyle"
						:disabled="(!(this.userInfo.sign_status == 1 || this.sign_status==2))||(isEdit == 2)"
						:class="!(this.userInfo.sign_status == 1 || this.sign_status==2)?'gray9':''" />
				</view>
				<view class="align-center">
					<view class="txt">{{$t('mine').身份证号}}</view>
					<input @blur="saveInfo()" v-model="id_num" type="text" class="flex1 h50"
						:placeholder="$t('mine').输入有效身份证号" placeholder-class="placeholderStyle"
						:disabled="(!(this.userInfo.sign_status == 1 || this.sign_status==2))||(isEdit == 2)"
						:class="!(this.userInfo.sign_status == 1 || this.sign_status==2)?'gray9':''" />
				</view>
			</view>
			<view class="bgWhite plr15 ft15 mt10">
				<view class="align-center bdbe">
					<view class="txt">{{$t('mine').开户银行}}</view>
					<input @blur="saveInfo()" v-model="bank_name" type="text" class="flex1 h50"
						:disabled="(isEdit == 2)" :placeholder="$t('mine').输入开户银行"
						placeholder-class="placeholderStyle" />
				</view>
				<view class="align-center bdbe">
					<view class="txt">{{$t('mine').银行卡号}}</view>
					<input @blur="saveInfo()" v-model="bank_num" type="number" class="flex1 h50"
						:disabled="(isEdit == 2)" :placeholder="$t('mine').输入银行卡号"
						placeholder-class="placeholderStyle" />
				</view>
				<view class="align-center bdbe">
					<view class="txt">{{$t('index').手机号}}</view>
					<input @blur="saveInfo()" v-model="bank_phone" type="number" class="flex1 h50"
						:disabled="(isEdit == 2)" :placeholder="$t('mine').输入手机号"
						placeholder-class="placeholderStyle" />
					<!-- v-model="userInfo.phone" -->
				</view>
				<view class="align-center">
					<view class="txt">{{$t('set').验证码}}</view>
					<input v-model="captcha" type="number" class="flex1 h50" :placeholder="$t('mine').输入验证码"
						:disabled="(isEdit == 2)" placeholder-class="placeholderStyle" />
					<view class="radius4 bdlight tc ptb3 red ft12 plr8" @click="getCode()">
						{{ timeDown > 0 ? timeDown + 's' : $t('login').获取验证码 }}
					</view>
				</view>
			</view>
		</view>
		<!-- 港澳 -->
		<view v-if="country==1" class="box2">
			<view class="bgWhite plr15 ft15">

				<view class="bdbe news-top">
					<view class="txt">{{$t('mine').国籍}}</view>
					<view class="bu1" @click="chooselist(1)">
						<view class="ft16 mr10 choose2"><text
								:class="{ choose1: nationality==''}">{{nationality==''?$t('mine').请选择:nationality}}</text>
						</view>
						<image src="../../static/images/mine/icon/arrowright.png" mode="aspectFill"
							style="width: 10rpx;height: 18rpx;"></image>
					</view>
				</view>
				<view class=" news-top">
					<view class="txt" :style="{'line-height': lang=='en'?'normal':'100rpx'}" :class="lang=='en'?'align-center':''">{{$t('mine').证件类型}}</view>
					<view class="bu1" @click="chooselist(2)">
						<view class="ft16 mr10 choose2"><text
								:class="{ choose1: documents==''}">{{documents==''?$t('mine').请选择:documents}}</text>
						</view>
						<image src="../../static/images/mine/icon/arrowright.png" mode="aspectFill"
							style="width: 10rpx;height: 18rpx;"></image>
					</view>
				</view>
			</view>

			<view class="bgWhite plr15 ft15 mt10">
				<view class="bdbe" style="padding-bottom: 43upx;">
					<view class="txt1">
						<view class="mr5">{{$t('mine').拍摄上传证件照片}}</view>
						<image src="../../static/images/wallet/gantanhao.png" mode="" class="icon1"
							@click="is_show3=true">
						</image>
					</view>
					<view class="box1 mt5">
						<view class="bg1">
							<image :src="front_img||'../../static/images/wallet/renxiangmian.png'" mode="aspectFill"
								class="img1" @click="chooseImage(1,2)"></image>
							<view class="bg2" v-show="front_img" @click="delPic(1)">
								<image src="../../static/images/wallet/delete1.png" mode="" class="img2"></image>
							</view>
						</view>
						<view class="bg1" v-show="this.htData.cer_type!='passport'">
							<image :src="back_img||'/static/images/wallet/guohuimian.png'" mode="aspectFill"
								class="img1" @click="chooseImage(2,2)"></image>
							<view class="bg2" v-show="back_img" @click="delPic(2)">
								<image src="../../static/images/wallet/delete1.png" mode="" class="img2"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="align-center bdbe">
					<view class="txt">{{$t('mine').真实姓名}}</view>
					<input @blur="saveInfo()" v-model="username" type="text" class="flex1 h50" :placeholder="$t('mine').真实姓名"
						@input="nameInput" :disabled="(isEdit == 2)" placeholder-class="placeholderStyle" />
				</view>
				<view class="align-center bdbe">
					<view class="txt">{{$t('mine').证件号码}}</view>
					<input @blur="saveInfo()" v-model="id_num" type="text" class="flex1 h50" :placeholder="$t('mine').证件号码"
						@input="idNumInput" :disabled="(isEdit == 2)" placeholder-class="placeholderStyle" />
				</view>
				<view class="bdbe news-top">
					<view class="txt">{{$t('mine').性别}}</view>
					<view class="bu1" @click="chooselist(3)">
						<view class="ft16 mr10 choose2"><text
								:class="{ choose1: gender==''}">{{gender==''?$t('mine').请选择:gender}}</text></view>
						<image src="../../static/images/mine/icon/arrowright.png" mode="aspectFill"
							style="width: 10rpx;height: 18rpx;"></image>
					</view>
				</view>
				<view class="bdbe news-top">
					<view class="txt">{{$t('mine').出生日期}}</view>
					<view class="bu1" @click="openBirth">
						<view class="ft16 mr10 choose2"><text
								:class="{ choose1: birth==''}">{{birth==''?$t('mine').请选择:birth}}</text></view>
						<image src="../../static/images/mine/icon/arrowright.png" mode="aspectFill"
							style="width: 10rpx;height: 18rpx;"></image>
					</view>
				</view>
			</view>
		</view>

		<mix-button ref="confirmBtn" :text="$t('common').确认" marginTop="55rpx" @onConfirm="submit"></mix-button>

		<view class="mt20 gray6 plr15 ft12"
			v-if="(this.userInfo.sign_status == 1 || this.sign_status==2)||this.userInfo.area == 2">
			{{$t('mine').说明您在提交注册时}}
		</view>
		<view class="mt20 gray6 plr15 ft12" v-else>
			{{$t('mine').说明修改银行卡}}
		</view>

		<!-- 身份证上传要求弹窗 -->
		<u-overlay :show="is_show3" @click="is_show3 = false" opacity=".4">
			<view class="t-box">
				<view class="txt3" style="" @tap.stop>
					<view class="titl1">{{$t('mine').身份证上传要求}}</view>
					<view class="main">{{$t('mine').身份证上传要求内容}}</view>
					<image src="../../static/images/wallet/show-right.png" mode="" class="img1"></image>
					<view class="bu-konw" @click="know()">
						{{$t('mine').我知道了}}
					</view>

				</view>
			</view>
		</u-overlay>

		<!-- 国籍地区选择器 -->
		<u-picker :show="is_show4" :columns="list_now" @confirm="bu1" @cancel="is_show4=false" confirmColor="#F44A42"
			cancelColor="#333333" @close="is_show4=false" closeOnClickOverlay></u-picker>
		<!-- 证件类型 -->
		<u-picker :show="showCer" :columns="list2" @confirm="bu1" @cancel="showCer=false" confirmColor="#F44A42"
			keyName="label" cancelColor="#333333" @close="showCer=false" closeOnClickOverlay></u-picker>
		<u-picker :show="showCountry" :columns="list1" @confirm="bu1" @cancel="showCountry=false" confirmColor="#F44A42"
			keyName="label" cancelColor="#333333" @close="showCountry=false" closeOnClickOverlay></u-picker>
		<!-- 日期选择器 -->
		<u-datetime-picker :show="is_show5" v-model="time_now" mode="date" @confirm="bu2" :minDate="mindate"
			confirmColor="#F44A42" :maxDate="maxdate" @cancel="is_show5=false" @close="is_show5=false"
			closeOnClickOverlay ref="datetimePicker"></u-datetime-picker>
		<u-popup :show="showd" @close="close" mode="center" round="8px" :safeAreaInsetBottom="false">
			<view class="bdbe justify-center align-center" style="max-width: 600rpx;">
				<view class="ft15 ptb20 " style="max-width: 600rpx;" :class="lang=='en'?'':'plr20'">
					<view class="plr20">
						{{$t('mine').上传证件照片错误}}
					</view>
					<view class="plr20">
						{{$t('mine').如需上传身份证照片请切换至大陆区域操作}}
					</view>
				</view>
			</view>
			<view class="tc" style="width: 600rpx;height: 80rpx;line-height: 80rpx;" @click="showd = false">
				<view class="ft15 light"><text>{{$t('fan').我知道了}}</text></view>
			</view>
		</u-popup>
		<u-popup :show="showReview" @close="close" mode="center" round="8px" :safeAreaInsetBottom="false">
			<view class="bdbe justify-center align-center" style="max-width: 600rpx;">
				<view class="ft15 ptb20 " style="max-width: 600rpx;" :class="lang=='en'?'':'plr20'">
					<view class="plr20">
						{{$t('mine').正在验证签约资料}}
					</view>
				</view>
			</view>
			<view class="tc" style="width: 600rpx;height: 80rpx;line-height: 80rpx;" @click="back()">
				<view class="ft15 light"><text>{{$t('fan').我知道了}}</text></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import areaList from '../../static/js/area.js'
	export default {
		data() {
			return {
				//新增开始
				front_img: '',
				back_img: '',
				country: 0, //0国内，1港澳
				showd:false,
				showReview:false,
				lang:uni.getStorageInfoSync('lang')?uni.getStorageSync('lang').lang:'zh',
				isEdit: '',
				showCer: false, //证件选择器
				showCountry: false, //国籍选择器
				is_show1: false, //第一个删除按钮显示、隐藏
				is_show2: false, //第二个删除按钮显示、隐藏
				is_show3: false, //上传身份证要求弹窗显示、隐藏
				is_show4: false, //国籍地区选择器弹出、收起
				is_show5: false, //日期选择器弹出、收起
				is_show6: true, //第二张上传图片的显示与隐藏
				imageList: [],
				htData: {
					cer_type: ''
				},
				nationality: '',
				documents: '',
				gender: '',
				birth: '',
				list_now: [],
				list1: [],
				list2: [],
				list3: [
					['男', '女']
				],
				cer_TypeList: [{
						label: '台湾居民来往大陆通行证',
						// 其他属性值
						id: 'mtpt'
					},
					// {
					// 	label: '台湾居民居住证',
					// 	// 其他属性值
					// 	id: 'rpt'
					// },
					{
						label: '港澳居民来往内地通行证',
						// 其他属性值
						id: 'mtphkm'
					},
					{
						label: '护照',
						// 其他属性值
						id: 'passport'
					},
					// {
					// 	label: '港澳居民居住证',
					// 	// 其他属性值
					// 	id: 'rphkm'
					// }
				],
				mindate: Number(new Date('1920-01-01')),
				maxdate: Number(new Date()),
				time_now: Number(new Date()),
				//新增结束

				username: '',
				true_namey: '',
				id_num: '',
				bank_name: '',
				bank_num: '',
				bank_numy: '',
				bank_phone: '',
				captcha: '',
				timeDown: "",
				isbind: '',
				sign_status: "",
				bankInfo: {}
			}
		},
		computed: {
			userInfo() {
				if(this.$store.state.userInfo.user_bank&&this.$store.state.userInfo.user_bank.channel == 22 ){
					this.showReview = true
				}
				return this.$store.state.userInfo
			}
		},
		onLoad(options) {
			const year = new Date().getFullYear();
			const month = (new Date().getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
			const day = new Date().getDate().toString().padStart(2, '0');
			this.mindate = Number(new Date((year - 65) + '-' + month + '-' + day))
			this.maxdate = Number(new Date((year - 18) + '-' + month + '-' + day))
			if (options.val && options.val == 1) {
				this.country = 1
			} else {
				this.country = 0
			}
			if (options.isEdit) {
				this.isEdit = options.isEdit
				this.getbankAPI(1)
			}
			console.log(areaList, 'areaList');
			this.list1 = [areaList]
			if (this.userInfo.area == 2) {
				this.getbankAPI(1)
			}
			// this.true_name = this.userInfo.true_name
			// this.id_num = this.userInfo.id_num
			// this.brank_name = this.userInfo.brank_name
			// this.brank_num = this.userInfo.brank_num
			// this.brank_phone = this.userInfo.phone
		},
		onReady() {
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		onShow() {
			console.log(uni.getStorageInfoSync('lang'))
			this.$store.dispatch('getuserInfo')
			console.log( this.$domain.api,' this.$domain.api')
		},
		watch: {

			userInfo: {
				handler(nVal, oVal) {

					if ((this.userInfo.sign_status == 1 && this.userInfo.area == 1) || this.userInfo.area == 2) {
						uni.setNavigationBarTitle({
							title: this.$t('mine').电签
						})
						let bingCardInfo = this.userInfo.area == 1?uni.getStorageSync('bingCardInfo'):uni.getStorageSync('HTBingCardInfo')
						if (bingCardInfo&&!this.isEdit) {
							this.username = bingCardInfo.username
							this.id_num = bingCardInfo.id_num
							this.bank_name = bingCardInfo.bank_name
							this.bank_num = bingCardInfo.bank_num
							this.userInfo.phone = bingCardInfo.bank_phone,
							this.front_img = bingCardInfo.front_img,
							this.birth = bingCardInfo.birthday.slice(0, 10)
							this.documents = bingCardInfo.documents
								this.gender = bingCardInfo.sex
								this.nationality = bingCardInfo.nationality
								this.back_img = bingCardInfo.back_img
								this.htData.nationality_code = bingCardInfo.nationality_code
								this.htData.cer_type = bingCardInfo.cer_type

						}
					} else if (this.userInfo.area == 1) {
						uni.setNavigationBarTitle({
							title: this.$t('mine').换绑银行卡
						})
						this.getbankAPI()
					}
				}

			}
		},
		methods: {
			openBirth() {
				if (this.isEdit == 2) {
					return
				} else {

				}
				this.$refs.datetimePicker.innerValue = new Date((this.birth?this.birth:'1990-01-01')).getTime()
				this.is_show5 = true
			},
			nameInput(e) {
				const o = e.target;
				const inputRule = /[^a-zA-Z\u4E00-\u9FA5, ]/g //修改inputRule 的值
				this.$nextTick(function() {
					this.username = o.value.replace(inputRule, '');
				})
			},
			idNumInput(e) {
				const o = e.target;
				const inputRule = /[^a-zA-Z\d]/g //修改inputRule 的值
				this.$nextTick(function() {
					this.id_num = o.value.replace(inputRule, '');
				})
			},
			randNum(min, max) {
				return Math.floor(Math.random() * (max - min)) + min + Date.now();
			},
			delPic(type){
				if (this.isEdit == 2) {
					return
				}
				if (type == 1) {
					this.front_img = ''
				} else{
					this.back_img = ''
				}
				this.saveInfo()
			},
			// 新增图片
			chooseImage(type, country) {
				if (this.userInfo.area == 2) {
					if (!this.htData.cer_type) {
						return this.$utils.msg(this.$t('mine').请选择证件类型)
					}
				}
				if (this.isEdit == 2) {
					return
				}
				// let count = 9 - this.imageList.length;
				uni.chooseImage({
					count: 1,
					success: async (chooseImageRes) => {
						setTimeout(()=>{
							uni.showLoading({
								title: this.$t('mine').正在上传
							})
						},0)
						console.log(chooseImageRes.tempFilePaths[0],'chooseImageRes.tempFilePaths[0]');
						console.log(chooseImageRes.tempFiles[0].size,'chooseImageRes.tempFiles[0].size');
						// let newData= await this.$utils.imageCompress(chooseImageRes.tempFilePaths[0])
						let newData = {
							url:chooseImageRes.tempFilePaths[0],
							size: chooseImageRes.tempFiles[0].size
						}
						let resSize = newData.size;
						// let resSize = newData.size;
						if (resSize > 1024 * 1024* 7) {
							return setTimeout(()=>{
								console.log(33333333333333);
								uni.hideLoading()
								this.$utils.msg(this.$t('mine').上传图片大小不能超过7MB)
							},1)
						}else if (resSize > 1024 * 1024* 1) {
							newData= await this.$utils.imageCompress(chooseImageRes.tempFilePaths[0])
							resSize = newData.size;
						}
						let pixel =''
						if (resSize > 1024 * 1024) {
							pixel = 100
						}
						let key;
						// #ifdef MP-WEIXIN  
						key = '.' + chooseImageRes.tempFiles[0].path.toLowerCase().split('.')[1];
						// #endif
						// #ifdef H5
						key = chooseImageRes.tempFiles[0].name;
						// #endif
						this.$api.qiniuToken().then((res) => {
							let uploadMsg = res.data;
							for (var i = 0; i < chooseImageRes.tempFiles.length; i++) {
								let uniqueCode = this.randNum(100, 5);
								let formData = {
									'key': 'userfile/' + uniqueCode + key,
									'token': uploadMsg.token
								}
								let options = {
									filePath: newData.url,
									name: 'file',
									formData: formData,
								}
								this.$api.uploadImg(options,pixel).then(async (res) => {
									let _this = this
									let partImgUrl = uploadMsg.url + '/' + res;
									console.log(partImgUrl,'partImgUrl');
									if (type == 1) {
										if (country == 1) {
											const sfrespon = await this.$api.chuangLanOcr({
												imageType: 'URL',
												image: partImgUrl,
												ocrType: 0,
												detectRisk: true
											})
											if (sfrespon && sfrespon.code == 1) {
												let sfres = sfrespon.data
												if (sfres.code == 200000 &&
													sfres
													.data.imageStatus ==
													'normal'
												) {
													_this.username = sfres.data
														.name
													_this.id_num = sfres.data
														.cardNum
													_this.front_img = partImgUrl
													_this.saveInfo()
												} else {
													_this.$utils.msg(this.$t(
														'mine')['识别失败'+sfres.data.imageStatus])
												}
											} else {
												_this.$utils.msg(this.$t(
													'mine').识别失败)
											}
											uni.hideLoading()
										} else {
											let cardType
											if (this.htData.cer_type == 'mtphkm'||this.htData.cer_type == 'mtpt') {
												cardType = 3
											} else if (this.htData.cer_type == 'rpt'||this.htData.cer_type == 'rphkm') {
												cardType = 2
											} else if(this.htData.cer_type == 'passport'){
												cardType = 1
											}
											uni.uploadFile({
												url: this.$domain.api+'common/goChuangLanOcr',
												filePath: newData.url,
												name: 'file',
												formData: {
													type:cardType
												},
												header: {
													"token": uni.getStorageSync('logintoken') || ''
												},
												success: (res) => {
													res = JSON.parse(res.data)
													uni.hideLoading()
													if (res.code == 1) {
														
														if(res.data&&res.data.name){
															_this.username = res.data
																.name
															_this.id_num = res.data
																.number
															_this.front_img = partImgUrl
															_this.saveInfo()
														}else{
															_this.showd = true
														}
													} else{
														_this.showd = true
													}
												},
												fail: (err) => {
													_this.showd = true
													// _this.$utils.msg(this.$t(
													// 	'mine').识别失败)
												}
											})
											// _this.front_img = partImgUrl
											// _this.saveInfo()
										}
									} else {
										if (country == 1) {
											const sfrespon = await this.$api.chuangLanOcr({
												imageType: 'URL',
												image: partImgUrl,
												ocrType: 1,
												detectRisk: true
											})
											if (sfrespon && sfrespon.code == 1) {
												let sfres = sfrespon.data
												if (sfres.code == 200000 &&
													sfres
													.data.imageStatus ==
													'normal'
												) {
													_this.back_img = partImgUrl
													_this.saveInfo()
													// _this.$utils.msg('识别成功')
												} else {
													_this.$utils.msg(this.$t(
														'mine')['识别失败'+sfres.data.imageStatus])
												}
											} else {
												_this.$utils.msg(this.$t(
													'mine').识别失败)
											}
											uni.hideLoading()
										}
										else{
											uni.uploadFile()
											uni.hideLoading()
											_this.back_img = partImgUrl
											_this.saveInfo()
										}
									}
									// if(this.imageList.length<9){
									// 	this.imageList.push(partImgUrl);
									// }
									// console.log(this.imageList)
								})
							}
						})

					},
					fail: (err) => {
						this.$utils.msg('上传失败')
						uni.hideLoading()
						console.log("err: ", JSON.stringify(err));
					},
					complete: (err) => {
						uni.hideLoading()
						console.log("err: ", JSON.stringify(err));
					},
				});
				// setTimeout(()=>{
				// 	uni.hideLoading()
				// },1500)
			},
			// 选择出生日期
			bu2(e) {
				console.log('confirm', e.value) //返回时一个时间戳
				//写法2：mode为data的时候，需要用js转化为格式化的年月日在进行组合
				const date = new Date(e.value)
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
				const day = date.getDate().toString().padStart(2, '0');
				this.birth = `${year}-${month}-${day}`; // 组合成 YYYY-MM-DD 格式
				this.saveInfo()
				this.is_show5 = false
			},
			//可以通过formatter参数编写自定义格式化规则
			formatter(type, value) {
				// console.log(type)
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}

				return value
			},
			//切换选项列表
			chooselist(val) {
				if (this.isEdit == 2) {
					return
				} else {

				}
				if (val == 1) {

					this.list_now = this.list1
					this.showCountry = true
				} else if (val == 2) {
					if (this.nationality) {
						if (this.nationality == '中国香港' || this.nationality == '中国澳门') {
							this.list2 = [
								[{
										label: '港澳居民来往内地通行证',
										// 其他属性值
										id: 'mtphkm'
									},
									{
										label: '护照',
										// 其他属性值
										id: 'passport'
									},
									// {
									// 	label: '港澳居民居住证',
									// 	// 其他属性值
									// 	id: 'rphkm'
									// }
								]
							]
						} else if (this.nationality == '中国台湾') {
							this.list2 = [
								[{
										label: '台湾居民来往大陆通行证',
										// 其他属性值
										id: 'mtpt'
									},
									// {
									// 	label: '台湾居民居住证',
									// 	// 其他属性值
									// 	id: 'rpt'
									// }
								]
							]
						} else {
							this.list2 = [
								[{
									label: '护照',
									// 其他属性值
									id: 'passport'
								}]
							]
							this.is_show6 = false
						}
						this.list_now = this.list2
						this.showCer = true
					} else {
						this.$utils.msg(this.$t('mine').请先选择国籍)
					}


				} else {

					this.list_now = this.list3
					this.is_show4 = true
				}
			},
			//选择国籍地区or证件类型or性别
			bu1(value1) {
				if (this.list_now == this.list1) {
					this.nationality = value1.value[0].label
					this.htData.nationality_code = value1.value[0].id
					if (this.nationality == '中国香港' || this.nationality == '中国澳门'||this.nationality == '中国台湾') {
						this.htData.cer_type = ''
						this.documents = ''
					} else{
						this.htData.cer_type = 'passport'
						this.documents = '护照'
					}
					this.back_img = ''
					this.front_img = ''
					this.showCountry = false
				} else if (this.list_now == this.list2) {
					if (value1.value[0].id == 'passport') {
						this.is_show6 = false
					} else {
						this.is_show6 = true
					}
					this.htData.cer_type = value1.value[0].id
					this.documents = value1.value[0].label
					this.back_img = ''
					this.front_img = ''
					this.showCer = false
				} else {

					this.gender = value1.value[0]
					this.is_show4 = false
				}
				this.saveInfo()
			},
			know() {
				this.is_show3 = false
			},
			// 保存填写的信息
			saveInfo() {
				let bingCardInfo = {
					birthday: this.birth,
					sex: this.gender,
					nationality: this.nationality,
					nationality_code: this.htData.nationality_code,
					cer_type: this.htData.cer_type,
					front_img: this.front_img,
					back_img: this.back_img,
					username: this.username,
					id_num: this.id_num,
					bank_name: this.bank_name,
					bank_num: this.bank_num,
					bank_phone: this.userInfo.phone,
					documents: this.documents,
				}
				if (this.userInfo.area == 1) {
					uni.setStorageSync('bingCardInfo', bingCardInfo)
				} else{
					uni.setStorageSync('HTBingCardInfo', bingCardInfo)
				}
			},
			//获取验证码
			getCode() {
				if (this.timeDown > 0 || this.isEdit == 2) {
					return;
				}
				this.$utils.throttle(() => {
					const phone = this.bank_phone;
					if (!this.userInfo.phone) {
						return this.$utils.msg(this.$t('login').请输入手机号码);
					}
					this.$api.smsSend({
						phone: phone,
						event: 'bindbrank',

					}).then((res) => {
						if (res && res.code == 1) {
							this.$utils.msg(res.msg);
							this.countDown(60);
						}
					})
				}, 2000)
			},
			//倒计时
			countDown(timer) {
				timer--;
				this.timeDown = timer;
				if (timer > 0) {
					setTimeout(() => {
						this.countDown(timer);
					}, 1000)
				}
			},
			getAge(birthday) {
				// 新建日期对象
				let date = new Date()
				// 今天日期，数组，同 birthday
				let today = [date.getFullYear(), date.getMonth() + 1, date.getDate()]
				// 分别计算年月日差值
				let age = today.map((value, index) => {
					return value - birthday[index]
				})
				// 当天数为负数时，月减 1，天数加上月总天数
				if (age[2] < 0) {
					// 简单获取上个月总天数的方法，不会错
					let lastMonth = new Date(today[0], today[1], 0)
					age[1]--
					age[2] += lastMonth.getDate()
				}
				// 当月数为负数时，年减 1，月数加上 12
				if (age[1] < 0) {
					age[0]--
					age[1] += 12
				}
				return age
			},
			// 换绑银行卡信息
			async submit() {
				if (!this.username) {
					return this.$utils.msg(this.$t('mine').请输入真实姓名)
				}
				
				if (!this.front_img) {
					return this.$utils.msg(this.$t('mine').请上传证件正面图)
				}
				//电签
				if (this.userInfo.area == 2) {
					if (!this.id_num) {
						return this.$utils.msg(this.$t('mine').请输入证件号码)
					}
					//港澳进度
					this.getHTContractUrl()
				} else {
					if (!this.back_img) {
						return this.$utils.msg(this.$t('mine').请上传证件背面图)
					}
					// 国内
					if (!this.username) {
						return this.$utils.msg(this.$t('mine').请输入真实姓名)
					}
					if (!this.id_num) {
						return this.$utils.msg(this.$t('mine').输入有效身份证号)
					} else {
						let age = [this.id_num.slice(6, 10), this.id_num.slice(10, 12), this.id_num.slice(12, 14)]
						// console.log('this.getAge(age)[0]',this.id_num.slice(6, 10), this.id_num.slice(10, 12), this.id_num.slice(12, 14),this.getAge(age)[0]);
						if (this.getAge(age)[0] > 17 && this.getAge(age)[0] < 65) {
							
						} else {
							this.$utils.msg(this.$t('mine').年龄需大于)
							return
						}
					}
					if (!this.bank_name) {
						return this.$utils.msg(this.$t('mine').输入开户银行)
					}
					if (!this.bank_num) {
						return this.$utils.msg(this.$t('mine').输入银行卡号)
					}
					if (!this.userInfo.phone) {
						return this.$utils.msg(this.$t('login').请输入手机号码)
					}
					if (!this.captcha) {
						return this.$utils.msg(this.$t('login').请输入验证码)
					}
					let infoObj = {
						back_img: this.back_img,
						front_img: this.front_img,
						username: this.username,
						id_num: this.id_num,
						bank_name: this.bank_name,
						bank_num: this.bank_num,
						bank_phone: this.bank_phone,
						captcha: this.captcha
					}
					const res = await this.$api.bindbrank(infoObj)
					// return
					if (res && res.code == 1) {
						// this.userInfo.sign_status == 2
						if (res.data.sign_status == 2) {
							uni.reLaunch({
								url: `/pages/wallet/withdraw`
							})
						} else {
							if (this.userInfo.channel == 1) {
								this.getContractUrlAPI(1)
							} else{
								this.youfuNotify(1)
							}
						}
					}
				}
			},
			async getHTContractUrl() {
				if (!this.gender) {
					return this.$utils.msg(this.$t('mine').请选择性别)
				}
				if (!this.nationality) {
					return this.$utils.msg(this.$t('mine').请先选择国籍)
				}
				if (!this.htData.cer_type||!this.documents) {
					return this.$utils.msg(this.$t('mine').请选择证件类型)
				}

				if (!this.back_img && this.htData.cer_type != 'passport') {
					return this.$utils.msg(this.$t('mine').请上传证件背面图)
				}
				let obj = {
					username: this.username,
					birthday: this.birth,
					sex: this.gender,
					nationality: this.nationality,
					nationality_code: this.htData.nationality_code,
					cer_type: this.htData.cer_type,
					id_num: this.id_num,
					// bankcard: this.bank_name,
					// phone: this.bank_phone,
					// cert_type:1,
					back_img: this.back_img,
					front_img: this.front_img
				}
				const res = await this.$api.getHTContractUrl(obj)
				if (res && res.code == 1) {
					this.navTo('/pages/wallet/progress?val=0')
					// location.href = res.data.url
				} else {
					this.$utils.msg(res.msg)
				}
			},
			async getContractUrlAPI(cert_type) {
				let obj = {
					name: this.username,
					idcard: this.id_num,
					bankcard: this.bank_name,
					phone: this.bank_phone,
					cert_type: 1
				}

				const res = await this.$api.getContractUrl({
					cert_type: cert_type
				})
				if (res && res.code == 1) {
					location.href = res.data.url
				}
			},
			async youfuNotify(cert_type) {
				let obj = {
					name: this.username,
					idcard: this.id_num,
					bankcard: this.bank_name,
					phone: this.bank_phone,
					cert_type: 1
				}
			
				const res = await this.$api.youfuNotify({
					cert_type: cert_type
				})
				if (res && res.code == 1) {
					this.showReview = true
					// location.href = res.data.url
				}else{
					this.$utils.msg(res.message)
				}
			},
			// 获取回显的银行卡信息
			async getbankAPI(type) {
				const res = await this.$api.getbank()
				if (res && res.code == 1) {
					if (type == 1) {
						if (res.data && res.data.step == 3) {
							uni.reLaunch({
								url: `/pages/wallet/withdraw?val=1`
							})
						} else if (res.data && res.data.step >= -1) {
							if (!this.isEdit) {
								this.navTo('/pages/wallet/progress?val=' + res.data.step)
							} else {
								this.bankInfo = res.data
								this.front_img = this.isEdit==2?this.bankInfo.front_img:''
								this.back_img = this.isEdit==2?this.bankInfo.back_img:''
								this.username = this.bankInfo.username
								this.id_num = this.bankInfo.id_num
								this.birth = this.bankInfo.birthday.slice(0, 10)
								this.nationality = this.bankInfo.nationality
								this.htData.nationality_code = this.bankInfo.nationality_code
								this.htData.cer_type = this.bankInfo.cer_type
								this.cer_TypeList.forEach((item) => {
									if (this.htData.cer_type == item.id) {
										this.documents = item.label
									} else {

									}
								})
								this.gender = this.bankInfo.sex
								this.saveInfo()
							}
						}
					} else {
						this.bankInfo = res.data
						this.front_img = this.bankInfo.front_img
						this.back_img = this.bankInfo.back_img
						this.username = this.bankInfo.username
						this.id_num = this.bankInfo.id_num
						this.bank_name = this.bankInfo.bank_name
						this.bank_num = this.bankInfo.bank_num
						this.bank_phone = this.bankInfo.bank_phone
						this.userInfo.phone = this.bankInfo.bank_phone
						let qfour = this.bank_num?.substring(0, 4)
						let hfour = this.bank_num?.substring(this.bank_num.length - 4)
						this.bank_numy = qfour + '****' + hfour
						let qname = this.username?.substring(0, 1)
						this.true_namey = qname + this.username?.substring(1).replace(/./g, '*');
						this.saveInfo()
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.placeholderStyle {
		font-size: 30upx !important;
	}

	.tip {
		background-color: rgba(242, 60, 75, 0.1);
	}

	.txt {
		width: 170upx
	}

	.txt1 {
		width: 100%;
		height: 100upx;
		// line-height: 100upx;
		display: flex;
		justify-content: start;
		align-items: center;

		.icon1 {
			width: 26upx;
			height: 26upx;
			margin-top: -4upx;
		}
	}

	.box1 {
		display: flex;
		justify-content: space-between;

		.bg1 {
			width: 308upx;
			height: 191upx;
			background-image: url("../../static/images/wallet/kuang.png");
			background-size: 308upx 191upx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;

			.img1 {
				width: 274upx;
				height: 157upx;
			}

			.bg2 {
				background-color: #ffffff;
				border-radius: 50%;
				width: 36upx;
				height: 36upx;
				position: absolute;
				right: 26upx;
				top: 26upx;
				overflow: hidden;
			}

			.img2 {
				display: block;
				width: 36upx;
				height: 36upx;
			}
		}

	}

	.txt2 {
		width: 308upx;
		height: 100upx;
		line-height: 100upx;
		font-size: 26upx;
	}

	.text-center {
		text-align: center;
	}

	.t-box {
		height: 100vh;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: center;

		.txt3 {
			width: 674upx;
			// height: 512upx;
			background-color: #ffffff;
			margin-top: -260upx;
			padding: 45upx 42upx;
			border-radius: 30upx;

			.titl1 {
				font-size: 32upx;
				// line-height: 60upx;
			}

			.main {
				margin-top: 10upx;
				font-size: 24upx;
				color: #666666;
				letter-spacing: 2upx;
				line-height: 40upx;
			}

			.img1 {
				width: 590upx;
				height: 128upx;
				margin-top: 38upx;
			}

			.bu-konw {
				margin: 0 auto;
				width: 420upx;
				height: 90upx;
				border-radius: 50upx;
				border: 2upx solid #F44A42;
				text-align: center;
				line-height: 86upx;
				margin-top: 42upx;
				font-size: 32upx;
				color: #F44A42;
			}
		}

	}

	.box2 {
		.bu1 {
			display: flex;
			justify-content: space-between;
			flex: 1;
			align-items: center;
		}

		.choose1 {
			color: #B0B0B0;
		}

		.choose2 {
			color: #333333;
		}

		.news-top {
			line-height: 99upx;
			display: flex;
			justify-content: space-between;
		}
	}
</style>